<template>
	<u-popup class="pay-pop-box" v-model="show" :custom-style="customStyle" :safe-area-inset-bottom="false"
		:mask-custom-style="{background: 'rgba(0, 0, 0, 0)'}" mode="bottom" border-radius="32" height="760rpx">
		<view class="content">
			<view class="content-top">
				<text></text>
				<text class="title">充值</text>
				<!-- <text class="cancel" @click="show=false">取消</text> -->
				<text></text>
			</view>
			<view class="content-actions">
				<text class="wallet">余额：{{globalGameCtx.walletPoint}} 钻</text>
				<text class="recharge" @click="goto('/pages/pay/index/index')">详情 ></text>
			</view>
			<view class="gifts-box">
				<!-- 循环渲染礼物数据 -->
				<view class="gift-item" v-for="(gift, index) in gifts" :key="index" :class="{ selected: gift.selected }"
					@click="selectPay(gift)">
					<!-- 根据是否选中显示不同内容 -->
					<text :class="{ 'custom-item': gift.custom,'gift-name':true }">{{ gift.name}}<text
							v-if="!gift.custom" class="zuan">钻</text>
					</text>
					<text class="gift-price">{{ gift.price }} 元</text>
				</view>
			</view>
			<view class="bottom-actions">
				<text class="payBtn" @click="pay(curItem.price)">立即充值 {{curItem.price}} 元</text>

			</view>

		</view>
		<view class="agreement-box">充值代表已阅读并同意 <text class="agreement"
				@click="goto('/pages/pay/protocol/index')">《用户充值协议》</text>
		</view>
	</u-popup>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	export default {
		components: {

		},
		props: {},
		data() {
			return {

				show: false,
				curItem: {
					price: 1
				},
				customStyle: {
					// 'background': '#6236FF',
				},
				// 礼物列表数据示例
				gifts: [{
						custom: false,
						name: '10',
						price: '1',
						selected: true,
						id: 1,
					},
					{
						custom: false,
						name: '50',
						price: '5',
						selected: false,
						id: 2,
					},
					{
						custom: false,
						name: '100',
						price: '10',
						selected: false,
						id: 3,
					},
					{
						custom: false,
						name: '300',
						price: '30',
						selected: false,
						id: 4,
					},
					{
						custom: false,
						name: '1000',
						price: '100',
						selected: false,
						id: 13,
					},
					{
						custom: true,
						name: '自定义金额',
						price: '最低可充 1',
						selected: false,
						id: 6,
					}
				]
			}
		},
		onLoad(option) {

		},
		onReady() {

		},
		computed: {
			...mapGetters(["globalGameCtx"]),
		},
		methods: {
			goto(url) {
				uni.navigateTo({
					url
				});
			},
			pay(price) {
				console.log(price, '调起支付')
			},
			open() {
				console.log("开启被调用");
				this.show = true
				console.log("开启被调用", this.show);
				// this.$emit('testShow', this.show)
			},
			setItemPay(item) {
				this.curItem = item
			},
			// 处理礼物选中状态的方法
			selectPay(item) {
				if (item.custom) {
					this.payType(item)
				} else {
					this.gifts.map((gift, i) => {
						if (item.id === gift.id) {
							if (!gift.selected) {
								// 切换选中状态
								gift.selected = true
								this.setItemPay(gift)
							} else {
								//已选中 则直接触发支付
								this.payType(gift)
							}
						} else {
							gift.selected = false

						}; // 重置其他礼物为未选中状态

					});
				}

			},
			/**
			 * @desc 判断充值类型 固定充值/自定义金额充值
			 */
			payType(gift) {
				if (gift.custom) {
					// 打开自定义充值
					this.$emit("openPayDefaultPop")


				} else {
					// 调起支付
					this.pay(gift.price)
				}
			},
		},
	}
</script>

<style lang='scss' scoped>
	@import url('./index.scss');

	.agreement-box {
		position: absolute;
		left: 0;
		bottom: 48rpx;
		width: 100vw;
		font-family: PingFangSC, PingFang SC;
		font-weight: 400;
		font-size: 22rpx;
		color: #838383;
		/* background-color: pink; */
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>